<template>
  <view>
    <my-search></my-search>
    <u-tabs 
    :list="tabs" 
    :scrollable="false"
    :current="current"
    @click="currentFn"
    ></u-tabs>
    <view class="goods">
      <view  v-if="current===0">
        <navigator class="goods-item" :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id"
        v-for="item in goods" :key="item.cat_id" >
          <view class="goods-img">
            <image :src="item.goods_small_logo"></image>
          </view>
          <view class="goods-info">
            <view class="goods-info-title">{{item.goods_name}}</view>
            <view class="goods-info-price">￥{{item.goods_price}}</view>
          </view>
        </navigator>
      </view>
      <view v-else-if="current===1">销量</view>
      <view v-else-if="current===2">价格</view>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return{
      tabs:[{name:"综合"},{name:"销量"},{name:"价格"}],
      current:0,
      goods:[],
      params:{
        query:"",
        cid:5,
        pagenum:1, 
        pagesize:10
      },
      total:0
    }
  },
  methods:{
    currentFn({index}){
      this.current=index
    },
    async getGoods(){
      const {message}=await uni.$u.http.get("/goods/search",{params:this.params})
      // console.log(message);
      this.goods=[...this.goods,...message.goods]
      this.total=message.total
    },
    async onPullDownRefresh(){
      this.goods=[]
      this.params.pagenum=1
      await this.getGoods()
      uni.stopPullDownRefresh()
      
    }
  },
  onLoad({cid}){
    this.params.cid=cid
    this.getGoods()
  },
  onReachBottom(){
    if(this.goods.length>=this.total){
      uni.showToast({title: '商品已经到底了',icon:"none"});
      return
    }
    this.params.pagenum++
    this.getGoods()
  }
}
</script>

<style lang="scss" >
.u-tabs__wrapper__nav__line{
  background-color: #f56c6c !important;
}
.goods{
  margin-bottom: 20rpx;
  .goods-item {
  display: flex;
  margin-top: 15rpx;
    .goods-img {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 191rpx;
        height: 191rpx;
        background-color: #ccc;
      }
    }

    .goods-info {
      flex:2;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
        font-size: 28rpx;
      .goods-info-title {
        color: #666;
      }
      .goods-info-price {
        color: red;
      }
    }
  }
}

</style>